<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单元素 form 
    action属性表示表单提交的服务器地址-->
     <form action="test.php" method="post">
        <!-- 1.明文输入框 readonly只读-->
         用户：<input type="text" readonly>
         <!-- 2.暗文输入框 -->
          <!-- br标签是强制换行显示 -->
         密码：<input type="password"><br>
         <!-- 单选按钮 
          想要设置互斥效果 加入同一个选项组
          label 点击文字时让表单元素聚焦
          -->
          性别：
             <label>
                男：<input name="gender" value="male" type="radio">
             </label>
                <!-- checked设置默认选中 -->
                女：<input checked name="gender" value="female" type="radio"><br>
                <!-- 复选框 -->
                爱好：
                    篮球：<input type="checkbox" name="hobbies" value="basketball">
                    足球：<input checked type="checkbox" name="hobbies" value="football">
                    游泳：<input type="checkbox" name="hobbies" value="swimming"><br>
                <!-- 分割线 -->
                <hr>
                <!-- 下拉框 -->
                 <select name="city">
                        <optgroup label="一线城市">
                            <option value="suzhou">苏州</option>
                            <!-- selected设置默认选中 -->
                            <option selected value="changzhou">常州</option>
                            <option value="wuxi">无锡</option>        
                        </optgroup>
                        <optgroup label="十八线城市">
                            <!-- disabled表示禁用 -->
                            <option disabled value="beijing">北京</option>
                            <option value="shanghai">上海</option>
                            <option value="guangdong">广东</option>        
                        </optgroup>

                 </select>
                 <!-- 多行文本框 -->
                  <textarea></textarea>
                  <!-- 进度条 -->
                   <progress value="70" max="100"></progress>
                   <!-- 滑块 -->
                    <input type="range" min="0" max="10" step="1">

                    <!-- 日期选择器 -->
                     <input type="date">
                     <!-- 时间日期选择器 -->
                     <input type="datetime-local">
                     <!-- 颜色拾取器 -->
                     <input type="color">
                     <!-- 提交按钮 -->
                     <input type="submit" value="提交">
                     <input type="button" value="普通按钮">

     </form>
     
</body>
</html>